
<template>
  <div class="layout">
    <Layout>
      <Header style="display: flex;justify-content: space-between">
          <div class="layout-logo"></div>
          <div class="layout-center">
            全家签到后台管理系统
          </div>
          <div class="layout-out">
            <Button type="text" ghost  @click="loginOut()">退出系统</Button>
          </div>
      </Header>
      <Layout :style="{padding: '0 50px'}">
        <Content :style="{padding: '24px 0', minHeight: '780px', background: '#fff'}">
          <Layout>
            <Sider hide-trigger collapsible :collapsed-width="78">
              <Menu :active-name="activeName" theme="dark" width="auto" :open-names="openNames" accordion @on-select="getHigh" ref="air">
                  <MenuItem v-for="mef in meList" :name="mef.num" :key="mef.num" :to="mef.url">{{mef.name}}
                  </MenuItem>
              </Menu>
            </Sider>
            <Content :style="{padding: '24px', minHeight: '780px', background: '#fff'}">
              <router-view/>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Layout>
  </div>

</template>
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        activeName: '1-1',// 高亮
        openNames: ['1'],  //展开
        meList: [
              {
                num: "1-1",
                name: "签到记录",
                url: "/record",
              },
              {
                num: "1-2",
                name: "领取记录",
                url: "/exchange",
              },
              {
                num: "1-3",
                name: "勋章设置",
                url: "/level",
              },
              {
                num: "1-4",
                name: "奖品设置",
                url: "/gift",
              },
              {
                num: "1-5",
                name: "用户管理",
                url: "/userManage",
              },
              {
                num: "1-6",
                name: "活动规则管理",
                url: "/rules",
              },
        ]
      }
    },
    methods:{
      /**登出**/
      loginOut(){
        sessionStorage.clear();
        this.$router.push({path: '/'});
      },

      /**获取高亮**/
      getHigh(name){
      sessionStorage.setItem('name',name);
      }
    },
    mounted(){
      this.activeName=sessionStorage.getItem('name');
      this.$nextTick(() => {
        this.$refs.air.updateOpened();
      });
    }
  }
</script>
<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    position: relative;
    top: 15px;
    left: 20px;
  }
  .layout-center{
    width: 400px;
    color:#fff;
    font-size: 24px;
    text-align: center;
  }

  .layout-footer-center {
    text-align: center;
  }
</style>
